import React, { PureComponent } from "react";
import { Card, Button, Spin } from "antd";
import { connect } from "dva";
import Link from "umi/link";
import queryString from "query-string";
import { openNotificationWithIcon } from "utils/comm";
import styles from "./index.less";

const Line = (props) => {
  const { label, value } = props;

  return (
    <div className={styles.row}>
      <span className={styles.key}>{label}</span>
      <span className={styles.word}>{value}</span>
    </div>
  );
};

@connect(({ PageNotice, loading }) => ({
  PageNoticeStore: PageNotice,
  loading,
  msgTypes: PageNotice.noticeTypes,
}))
class Detail extends PureComponent {
  constructor(props) {
    super(props);
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);

    this.state = {
      data: "",
    };
  }

  componentDidMount() {
    const {
      location: {
        query: { actionId = "" },
      },
      dispatch,
    } = this.props;
    dispatch({ type: "PageNotice/getNoticeType" });
    this.getDetailData(actionId);
  }

  getDetailData = (id) => {
    const { dispatch } = this.props;
    dispatch({
      type: "PageNotice/getNoticeDetail",
      payload: { id },
    }).then(({ errCode, errMsg, datas }) => {
      if (errCode === 0) {
        this.setState({ data: datas });
      } else {
        this.openNotificationWithIcon("warning", "", errMsg || "操作失败");
      }
    });
  };

  handleExit = () => {
    const { history } = this.props;
    // history.push('/home');
    history.goBack();
  };

  render() {
    const { loading,msgTypes } = this.props;
    const { data } = this.state;

    const {
      msgTitle,
      processInstanceId,
      id,
      processName,
      // msgTypeDescr,
      msgType,
      createTime,
      senderName,
      msgBoby,
    } = data;
    const typeItem = msgTypes.find((item)=> (item.key === msgType));
    const msgTypeDescr = typeItem && typeItem.value || '';

    const dataLoading = loading.effects["PageNotice/getNoticeDetail"] || loading.effects["PageNotice/getNoticeType"] || false;

    const link = (
      <Link
        to={{
          pathname: "/noticeflowdetail",
          search: queryString.stringify({
            processInstanceId,
            actionId: id,
          }),
        }}
      >
        {processName}
      </Link>
    );

    return (
      <div className={styles.root}>
        <Spin spinning={dataLoading} delay={300}>
          <Card title="消息详情" bordered={false}>
            <Line label="标题：" value={msgTitle} />
            <Line label="类型：" value={msgTypeDescr} />
            <Line label="来源：" value={link} />
            <Line label="处理人：" value={senderName} />
            <Line label="发送时间：" value={createTime} />

            <div className={styles.row}>
              <span className={styles.key}>内容：</span>
              <span className={styles.boxContent}>{msgBoby}</span>
            </div>
          </Card>

          <div className={styles.btns}>
            <Button onClick={this.handleExit}>返回</Button>
          </div>
        </Spin>
      </div>
    );
  }
}

export default Detail;
